<template>
    <myx-table
               :showAddButton="false"
               :data="data"
               :total="pageTotal"
               :search-method="handleSearch"
               :current-page="currentPage"
               :page-size="pageSize"
               search-field='username'
               @handle-search="handleSearch2"
               @current-change="change"
               @selection-change="selectionChange"
               @addData="addData"
               @exportAll="exportAll"
               :exportFileName="'午饭数据'"
               :titleList="titleList"
               :table-loading="tableLoading"
               :showSelection="true"
               :tableAttr="{ border: true }"
               :column="column">

        <template v-slot:tableCell="{ scope }">
            <div v-if="scope.column.key === 'lastloginip'">
                <el-tag
                        class="mx-1"
                        effect="dark">
                    {{ scope.row.lastLogin?.ip }}
                </el-tag>
            </div>
            <div v-if="scope.column.key === 'nowloginip'">
                <el-tag
                        class="mx-1"
                        effect="dark">
                    {{ scope.row.nowLogin?.ip }}
                </el-tag>
            </div>
            <div v-if="scope.column.key === 'username'">
                <el-tag
                        type="danger"
                        class="mx-1"
                        effect="dark">
                    {{ scope.row.username }}
                </el-tag>
            </div>
        </template>

        <!-- <template #tableMiddle>
            <fieldset>
                <legend>2314234</legend>
            </fieldset>
        </template> -->

    </myx-table>
</template>

<script setup>
import myxTable from "@/components/ui-components/myx-table/index.vue"
import api from "@/api"
import { ElLoading, ElMessage } from 'element-plus'
import qee from "qf-export-excel"
import slider from "myx-slider-captcha"



//表格数据
let data = ref([])
//列数据
let column = [
    {
        //key可以给任意值,但是不能重复
        key: "username",
        //这一列要渲染哪一个字段
        dataIndex: "username",
        //表头描述
        label: "登入账号",
        //列对齐方式
        align: "center",
        tableCell: true
    },
    {
        //key可以给任意值,但是不能重复
        key: "lastloginip",
        //这一列要渲染哪一个字段
        dataIndex: "lastLogin.ip",
        //表头描述
        label: "上次登入ip",
        //列对齐方式
        align: "center",
        tableCell: true
    },
    {
        //key可以给任意值,但是不能重复
        key: "lastlogintime",
        //这一列要渲染哪一个字段
        dataIndex: "lastLogin.loginTime",
        //表头描述
        label: "上次登入时间",
        //列对齐方式
        align: "center",
        sortable: true
    },
    {
        //key可以给任意值,但是不能重复
        key: "nowloginip",
        //这一列要渲染哪一个字段
        dataIndex: "nowLogin.ip",
        //表头描述
        label: "本次登入ip",
        //列对齐方式
        align: "center",
        tableCell:true
    },
    {
        //key可以给任意值,但是不能重复
        key: "nowlogintime",
        //这一列要渲染哪一个字段
        dataIndex: "nowLogin.loginTime",
        //表头描述
        label: "本次登入时间",
        //列对齐方式
        align: "center",
        sortable: true
    }
]



//搜索方法
let handleSearch = (key, cur, size) => {

    return api.searchLogApi(key, cur, size)
}

let handleSearch2 = val => {
    console.log('handleSearch2---', val)
}
//分页变化的处理函数
let change = page => {
    // console.log(page)
    //修改当前页码
    currentPage.value = page;
    getLoginLog()
}
//表格勾选内容的时候
let selectionChange = selection => {
    console.log('myx-外部', selection)
}

//添加数据

let addData = () => {
    console.log(123)
}

//编写一个获取日志,并且更新表格的方法

//声明一个loading

let tableLoading = ref(false)

//一页显示几条
let pageSize = ref(10)

// 第几页
let currentPage = ref(1)

//声明分页总数量
let pageTotal = ref(0)

let getLoginLog = async () => {
    tableLoading.value = true
    try {
        let res = await api.getLoginLogApi(currentPage.value, pageSize.value);
        tableLoading.value = false;
        data.value = res.data;
        pageTotal.value = res.total
    } catch (e) { }
}

//导出数据的表头

let titleList = [
    {
        title: '用户名',
        key: 'username'
    },
    {
        title: "上次登入ip",
        key: 'lastLogin.ip'
    },
    {
        title: '上次登入时间',
        key: "lastLogin.loginTime"
    },
    {
        title: "本次登入ip",
        key: "nowLogin.ip"
    },
    {
        title: "本次登入时间",
        key: "nowLogin.loginTime"
    }
]

//导出全部数据
let exportAll = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: '正在导出数据,数据量较大,请耐心等待...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    // console.log(123)
    //假如下面的接口是请求所有的数据
    try {
        let res = await api.getLoginLogApi(1, pageTotal.value)
        qee(titleList, res.data)

        loading.close()
        ElMessage.success('数据导出成功')
    } catch (e) {
        loading.close()
        ElMessage.error('数据导出失败:' + e.toString())
    }
}

onMounted(() => {

    getLoginLog();
})

</script>
<script>
export default {
    name: "welcome",
    meta: {
        name: "管理首页",
        icon: "icon-shouye1"
    }
}
</script>